window.onload = function () {
  // 需求分析：
  // 1 鼠标移入focus 显示 向左 向右箭头 移出时隐藏
  // 2 动态生成小圆点，且点击时 高亮相应切换
  // 3 点击小圆点时 能切换到对应轮播图
  // 4 点击向左 向右箭头  会分别切换到 上一张、下一张
  // 5 点击向左向右时，小圆点也会相应切换，且点击向左向右和点击小圆点 能互相关联
  // 6 自动播放(代码模拟 播放 下一张)
  // 7 鼠标移入focus，停止自动播放 鼠标移出focus后，轮播图自动播放

  // 获取元素：
  var focus = document.querySelector(".focus");
  var left = document.querySelector(".arrow-l");
  var right = document.querySelector(".arrow-r");

  var ul = document.querySelector(".focus ul");
  var ol = document.querySelector(".focus ol.circle");

  //关键参数 单张轮播图宽度
  var w = focus.offsetWidth;
  //  num标记播放到哪一张
  var num = 0;
  //  circle标记哪个小圆圈高亮
  var circle = 0;
  // 自动播放定时器
  var timer = null;
  //   节流阀
  var flag = true;

  //鼠标移入focus显示向左向右箭头且停止自动播放，移出隐藏并恢复自动播放
  focus.onmouseenter = function () {
    left.style.display = "block";
    right.style.display = "block";
    clearInterval(timer);
  };
  focus.onmouseleave = function () {
    left.style.display = "none";
    right.style.display = "none";
    autoplay();
  };

  //   动态生成和轮播图张数一致的小圆点
  for (var i = 0; i < ul.children.length; i++) {
    var li = document.createElement("li");
    //为每个小圆点设置index属性记录它的索引
    li.setAttribute("index", i);
    li.onclick = function () {
      // 移动ul，先获取当前小圆点的index
      var index = this.getAttribute("index");
      // 让num及circle与index同步
      num = circle = index;
      highlight();
      animate(ul, -index * w);
    };
    ol.appendChild(li);
  }
  ol.children[0].className = "current";

  //将第一张clone一份，放到ul的最后面
  var first = ul.children[0].cloneNode(true);
  ul.appendChild(first);

  //   点击left播放上一张 ,
  left.onclick = function () {
    // if (flag) {
    flag = false;
    //若已播放到真的第一张(再上一张就没了)时，快速移动到clone的第一张，并将num变成ul.children.length-1
    if (num == 0) {
      num = ul.children.length - 1;
      ul.style.left = -num * w + "px";
    }
    num--;
    // 移动到下一张
    animate(ul, -w * num, function () {
      flag = true;
    });
    //小圆圈也跟着切换
    circle--;
    if (circle < 0) {
      circle = ol.children.length - 1;
    }
    highlight();
    // }
  };

  //   点击right播放下一张 ,
  right.onclick = function () {
    // if (flag) {
    flag = false;
    //若已播放到最后一张(其实是clone的第一张)时，快速移动到真的第一张，并将num还原为0
    if (num == ul.children.length - 1) {
      ul.style.left = 0;
      num = 0;
    }
    num++;
    // 移动到下一张
    animate(ul, -w * num, function () {
      flag = true;
    });
    //小圆圈也跟着切换
    circle++;
    if (circle == ol.children.length) {
      circle = 0;
    }
    highlight();
    // }
  };

  //自动播放
  function autoplay() {
    timer = setInterval(function () {
      right.click();
    }, 2000);
  }
  autoplay();
  function highlight() {
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = "";
    }
    ol.children[circle].className = "current";
  }

  //循环输出服务
  var services = [{title:'话费',styleClass:'service_ico_huafei',bargin:false},
    {title:'机票',styleClass:'service_ico_feiji',bargin:true},
    {title:'影票',styleClass:'service_ico_movie',bargin:false},
    {title:'充电',styleClass:'service_ico_charge',bargin:false},
    {title:'彩票',styleClass:'service_ico_lottery',bargin:false},
    {title:'加油',styleClass:'service_ico_oil',bargin:false},
    {title:'礼物',styleClass:'service_ico_gift',bargin:false},
    {title:'文案',styleClass:'service_ico_write',bargin:false},
    {title:'酒店',styleClass:'service_ico_hotel',bargin:false},
    {title:'高铁',styleClass:'service_ico_rail',bargin:false},
    {title:'缴费',styleClass:'service_ico_pay',bargin:false},
    {title:'理财',styleClass:'service_ico_invest',bargin:false},
  ]

  var html = '';
  var li = '';
  for(var i in services){
    li = ` <li>
            <a href="#">
              <i class="service_ico ${services[i].styleClass}"></i>
              <p>${services[i].title}</p>
            </a>
            ${services[i].bargin?'<span class="hot"></span>':''}
          </li>`;
    html+=li;
  }
  document.querySelector('.lifeservice>ul').innerHTML = html;
};
